<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <div class="top_nav">
        <div class="top_nav_wrapper">
            <ul class="top_nav_l">
                <li><a href=""> <img src="../img/xingxing.png" alt="">收藏鲜花网(hua.com) </a></li>
                <li><a href=""><img src="../img/weixin.png" alt=""> 关注微信</a></li>
                <li><a href=""><img src="../img/hua.png" alt=""> 花礼网app</a></li>
            </ul>

            <ul class="top_nav_r">
                <li id="login"><a href="./login.html">登录</a></li>
                <li id="reg"><a href="./reg.html">注册</a></li>
                <li><a href="">订单查询</a></li>
                <li><a href="">客户服务</a></li>
                <li><a href="shoppingcart.html"> 购物车 <img src="../img/gouwuchekong.png" alt=""></a></li>
                <li>鲜花礼品网:国内领先鲜花网品牌</li>
            </ul>
        </div>

    </div>

    <div class="header_container">
        <div class="logo">
            <a href="home_page.html" class="logo_nav"></a>
        </div>
        <div class="search-box-group">
            <span class="search_img"></span>
            <input type="text" class="search_txt" placeholder="商品搜索">
            <button class="search_btn"> 搜索</button>
        </div>
        <ul class="searvice">
            <li class="searvice_phon"><span class="phon_img"></span><span>400-889-8188</span> </li>
            <li class="searvice_kefu"><span class="kefu_img"></span> <span>在线客服</span></li>
        </ul>
    </div>

    <div class="goods_detail">
        <div class="goods_preview">
            <div class="bigimg">
                <img src="../img/detail_img/flower1_1.jpg" alt="">
                <div class="slide"></div>
                <div class="right">
                    <div class="img_box"><img src="../img/detail_img//flower1_1.jpg" alt=""></div>
                    </div>
            </div>
            <ul class="goods_swiper">
                <li><img src="../img/detail_img/flower1_1.jpg" alt=""></li>
                <li><img src="../img/detail_img/flower1_2.jpg" alt=""></li>
                <li><img src="../img/detail_img/flower1_3.jpg" alt=""></li>
                <li><img src="../img/detail_img/flower1_4.jpg" alt=""></li>
            </ul>
        </div>
        <div class="goods_info">
            <div class="goods_info_area">
                <div class="title">
                    <p class="title_text">韩式花篮/阳光使者</p>
                </div>
                <div class="price">￥<span class="price_text">289</span></div>
                <div class="flower_words_msg">
                    <div>
                        <p class="flower_words_cotent"><span class="flower_words">花语</span>你逆光而来，配得上这世间所有的温柔美好</p>
                    </div>
                    <div>
                        <p class="flower_words_cotent"><span
                                class="flower_words">材料</span>香槟玫瑰11枝、向日葵2枝、香槟色洋桔梗3枝、橙色多头玫瑰2枝、尤加利叶5枝</p>
                    </div>
                    <div>
                        <p class="flower_words_cotent"><span class="flower_words">包裹</span>花泥、长方形手提花篮（花篮款式以各城市实际出货为准）
                        </p>
                    </div>
                    <div class="dilivery">
                        <p class="flower_words_cotent"><span class="flower_words">配送说明</span>全国 </p>
                    </div>
                </div>


                <div class="buy_btn">
                    <a class="addcart" href="">
                        <span></span>
                        加入购物车
                    </a>
                    <a href="" class="buy_now">
                        立即购买
                    </a>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="../js/jquery.js"></script>
<script>
       // //阴影的宽高
        w = $('.slide').width();
        h = $('.slide').height();
    //鼠标移入时滑块显示
    $('.bigimg').on('mousemove',function(e){
            $('.slide').css('display','block');
            $('.right').css('display','block');
                e = e || event;
        target = e.target || e.srcElement;
            x=e.offsetX-w/2;
            y=e.offsetY-h/2;
            maxwidth=$('.bigimg').width()-$('.slide').height();
            maxheight=$('.bigimg').height()-$('.slide').height();
            
        //   边界判定
        if (x < 0)
            x = 0;
        if (y < 0)
            y = 0;
        if (x > maxwidth)
            x = maxwidth;
        if (y > maxheight)
            y = maxheight;
                //设置放大比例
        scale = ($('.right img').width() - $('.right').width()) / maxwidth;
         console.log(scale)
        $('.slide').css({'top':`${y}px`,'left':`${x}px`}) ;
        $('.right img').css({'top':`${-y*scale}px`,'left':`${-x*scale}px`});
       
    })
    //鼠标移出时滑块隐藏
    $('.bigimg').on('mouseout',function(){
            $('.slide').css('display','none');
            $('.right').css('display','none');
    })

 
</script>

</html>